<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
		<link rel="stylesheet" href="plugins/fullPage.js-2.9.7/jquery.fullpage.min.css" />
		<link rel="stylesheet" href="./css/mui.min.css" />
		<link rel="stylesheet" href="./css/index.css" />
		<link rel="stylesheet" href="./css/animate.css" />
		<title>闪烁之光</title>
		<link rel="icon" href="images/favicon.ico">
	</head>
	<body>
		<style>
			body {
				font-family: 'Source Han Sans CN', 'Source Han Sans SC', 'Source Han Sans TC', 'Source Han Sans KR', 'Source Han Sans JP', 'Source Han Sans HK', 'Source Han Sans', 'Noto Sans CJK SC', 'Noto Sans CJK TC', 'Noto Sans CJK', 'Noto Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
			}

			.fullpage {
				max-width: 750px;
				text-align: center;
				margin: 0 auto;
				position: relative;
			}

			.download {
				position: absolute;
				width: 2rem;
				height: .66rem;
				top: .15rem;
				right: .14rem;
				z-index: 2;
			}

			.download2 {
				position: absolute;
				width: 3.4rem;
				height: 1rem;
				left: 2.1rem;
				bottom: .5rem;
				z-index: 2;
			}



			.modal_haoyou {
				position: absolute;
				width: 100%;
				left: 0;
				top: 0.8rem;
				z-index: 9;
			}

			.modal_haoyou img {
				width: 100%;

			}

			.modal_haoyou .modal_close {
				position: absolute;
				width: 10%;
				z-index: 2;
				height: 6%;
				right: 3%;
				top: 12.6%;
				border-radius: 100%;
			}


			.modal_hb {
				position: absolute;
				width: 100%;
				left: 0;
				top: 0rem;
				z-index: 9;
			}

			.modal_hb .modal_close {
				border-radius: 100%;
				width: .6rem;
				height: .6rem;
				position: absolute;
				right: .35rem;
				top: .95rem;
			}

			.modal_hb .txt_box {
				text-align: left;
				bottom: auto;
				top: 1.3rem;
				left: .7rem;
				font-weight: 600;
			}

			.modal_hb #nameBox_HB {
				position: absolute;
				top: 2.64rem;
				width: 100%;
				text-align: center;
			}

			#nameBox_HB img {
				width: 1.7rem;
			}

			.modal_hb .savehb {
				position: absolute;
				top: 11.3rem;
				left: 2rem;
				width: 3.2rem;
				height: .8rem;
			}

			.modal_hb .txt {
				letter-spacing: .08rem;
			}

			.callBox {
				position: absolute;
				top: 3.4rem;
				left: 1rem;
			}

			.callBtn {
				position: absolute;
				width: 1.64rem;
				height: .44rem;
				top: 0.38rem;
				right: .3rem;
				background: url(images/cb.png) no-repeat center center;
				background-size: cover;
			}

			.callBtn.cb {
				background-image: url("images/cbok.png");
			}

			.name {
				color: #6f59f8;
				font-size: .4rem;
				position: absolute;
				left: .44rem;
				top: .30rem;
			}

			.callbackLine {
				position: relative;
				width: 5.7rem;
				height: 1.15rem;
				background: url("images/haoyou_bg.png") center center no-repeat;
				background-size: cover;
			}


			.wp {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				overflow: hidden;
				width: 100%;
			}

			.page {
				height: 100vh;
				position: relative;
			}

			.page img.f1 {
				width: 98%;
				display: block;
				margin-left: -0.02rem;
				margin-top: 0.65rem;

			}

			.txt {
				font-size: .3rem;
				color: #3a59bb;
				letter-spacing: .03rem;
			}

			.txt28 {
				font-size: .28rem;
				color: #5874c6;
				letter-spacing: .03rem;
				line-height: 1.2;
			}

			.txt_box {
				position: absolute;
				bottom: 3.7rem;
				left: 0;
				width: 100%;
				text-align: center;
				display: block;
				line-height: normal;
			}

			.txt_y {
				color: #ff9100;
				font-size: .45rem;
				letter-spacing: .1rem;
			}

			.loginout {
				position: absolute;
				width: 1.7rem;
				height: .53rem;
				top: .8rem;
				right: .09rem;
				z-index: 2;
				background: url("./images/index_logout.png") center center no-repeat;
				background-size: cover;
			}

			.wp .f1 {
				position: absolute;
				top: 1rem;
				text-align: left;
				background: url(./images/full1.png) center top no-repeat;
				width: 7.4rem;
				margin: 0 auto;
				height: 12.65rem;
				background-size: cover;
			}

			.wp .f2 {
				position: absolute;
				top: .7rem;
				text-align: left;
				margin: 0 auto;
				background: url(./images/full2.png) -.15rem top no-repeat;
				width: 7.5rem;
				height: 12.65rem;
				background-size: cover;
			}


			.f2 .textBox {
				position: absolute;
				top: 1.9rem;
				left: .8rem;
			}

			.wp .f3 {
				position: absolute;
				top: 1rem;
				text-align: left;
				margin: 0 auto;
				background: url("./images/full3.png") -.03rem top no-repeat;
				width: 7.5rem;
				height: 12.27rem;
				background-size: cover;
			}

			.f3 .textBox {
				position: absolute;
				top: 1.5rem;
				left: .8rem;
				right: 0.3rem;
			}

			.wp .f4 {
				position: absolute;
				top: 1rem;
				margin: 0 auto;
				text-align: left;
				background: url("./images/full4.png") -.03rem top no-repeat;
				width: 7.5rem;
				height: 12.27rem;
				background-size: cover;
			}

			.f4 .textBox {
				position: absolute;
				top: 2rem;
				left: .8rem;
			}

			.wp .f5 {
				position: absolute;
				top: 1rem;
				margin: 0 auto;
				text-align: left;
				background: url("./images/full5.png") center top no-repeat;
				width: 7.5rem;
				height: 12.27rem;
				background-size: cover;
			}

			.f5 .textBox {
				position: absolute;
				top: 2rem;
				left: .8rem;
			}

			.wp .f6 {
				position: absolute;
				top: 1rem;
				margin: 0 auto;
				text-align: left;
				background: url("./images/full6.png") center top no-repeat;
				width: 7.5rem;
				height: 12.27rem;
				background-size: cover;
			}

			.f6 .textBox {
				position: absolute;
				top: 2.3rem;
				left: .8rem;
			}

			.wp .f7 {
				position: absolute;
				top: 1rem;
				left: .1rem;
				margin: 0 auto;
				background: url(./images/full7.png) center center no-repeat;
				width: 7.3rem;
				height: 13.96rem;
				background-size: contain;
			}

			.f7 .names {
				width: 4.54rem;
				height: 100px;
				position: absolute;
				top: 2.90rem;
				left: 1.33rem;
			}

			.names img {
				display: block;
				width: 3.5rem;
				margin: .13rem auto;
			}

			.f7 .zhhy_btn {
				position: absolute;
				top: 12rem;
				left: 2.5rem;
				width: 2.2rem;
				height: .54rem;
				z-index: 9;
			}
			}
		</style>
		<div class="fullpage">
			<img src="./images/log.png" class="logo"" />
			<div onclick=" logOut()" class=" loginout">
		</div>
		<img src="./images/index_bg.jpg" style="width: 100%;" />

		<div class="wp ">
			<div id="fullpage" class="wp-inner">
				<div class="section page">
					<div class="f1">
						<div class="txt_box" style="bottom: 1.7rem;">
							<div class="txt_y js-animate animated hide" data-animate="fadeIn" data-time="0"
								id="reg_date">
								XXXX年xx月XX日
							</div>
							<div class="txt js-animate animated hide" data-animate="fadeIn" data-time="500">是我们相遇的日子
							</div>
							<div class="txt js-animate animated hide" data-animate="fadeIn" data-time="1000"
								style="font-size: .25rem; margin-top: .2rem;color: #4d68bf;">你的闪烁之旅也从这里开始</div>
						</div>
					</div>
				</div>
				<div class="section page">
					<div class="f2">
						<div class="textBox">
							<div class="txt28 js-animate animated hide" data-animate="fadeIn" data-time="500">
								在这一年中
							</div>
							<div class="txt28 js-animate animated hide" data-animate="fadeIn" data-time="1000">
								你已累计打开闪烁<span id="open_num" class="txt_y">XXX</span>次,
							</div>
							<div class="txt28 js-animate animated hide" data-animate="fadeIn" data-time="1500">
								在线时间<span class="txt_y" id="online_day">XXXX</span>天,
							</div>
							<div class="txt28 js-animate animated hide" data-animate="fadeIn" data-time="2000">
								总计<span class="txt_y" id="online_hour">XXXX</span>小时。
							</div>
							<div style="    margin-top: 0.25rem;" class="txt28 js-animate animated hide"
								data-animate="fadeIn" data-time="2500">
								你似乎习惯在<span class="txt_y" id="active_time">早上</span>打开闪烁。
							</div>
							<div class="txt28 js-animate animated hide" data-animate="fadeIn" data-time="3000">
								有<span class="txt_y" id="similar_player_rate">XX%</span>的玩家与你习惯相近
							</div>
						</div>
					</div>
				</div>

				<div class="section page">
					<div class="f3">
						<div class="textBox">
							<div class="txt28 js-animate animated hide" data-animate="fadeIn" data-time="500">
								你的年度最佳英雄是<span class="txt_y" id="best_hero">best_hero</span>
							</div>
							<div class="txt28 js-animate animated hide" data-animate="fadeIn" data-time="1000">
								TA陪冒险者出战次数达到<span class="txt_y" id="battle_num">XXXX</span>次。
							</div>
							<div class="txt28 js-animate animated hide" data-animate="fadeIn" data-time="1500">
								今年你与英雄<span class="txt_y" id="common_hero">XXX</span>并肩作战，胜率高达<br /><span class="txt_y"
									id="common_hero_win_rate">XX</span>。
							</div>
							<div style="margin-top: 0.25rem;" class="txt28 js-animate animated hide"
								data-animate="fadeIn" data-time="2000">
								<strong>--所向披靡！</strong>
							</div>

						</div>
					</div>
				</div>

				<div class="section page">
					<div class="f4">
						<div class="textBox">
							<div class="txt28 js-animate animated hide" data-animate="fadeIn" data-time="500">
								你在一年里,共获得<span class="txt_y" id="diamond">XX</span>钻石,
							</div>
							<div class="txt28 js-animate animated hide" data-animate="fadeIn" data-time="1000">
								超越了<span class="txt_y" id="diamond_sort_rate">X%</span>的玩家。
							</div>

							<div style="margin-top: 0.28rem;" class="txt28 js-animate animated hide"
								data-animate="fadeIn" data-time="1500">
								<strong><span
										style="height: .025rem; width: .54rem; background-color: #4d68bf; display: inline-block; position: relative; top: -.1rem; margin-right: .1rem;"></span>抱着钻石去消费咯！</strong>
							</div>

						</div>
					</div>
				</div>

				<div class="section page">
					<div class="f5">
						<div class="textBox">
							<div class="txt28 js-animate animated hide" data-animate="fadeIn" data-time="500">
								你总共抽到<span class="txt_y" id="lottery_hero_num">X</span>次55英雄,
							</div>
							<div class="txt28 js-animate animated hide" data-animate="fadeIn" data-time="1000">
								超越了<span class="txt_y" id="lottery_lucky_rate">X%</span>的玩家。
							</div>
							<div class="txt28 js-animate animated hide" data-animate="fadeIn" data-time="1500">
								最多遇见的英雄是<span class="txt_y" id="partner_hero">XXXX。</span>
							</div>
							<div style="margin-top: 0.28rem;" class="txt28 js-animate animated hide"
								data-animate="fadeIn" data-time="2000">
								<strong><span
										style="height: .025rem; width: .54rem; background-color: #4d68bf; display: inline-block; position: relative; top: -.1rem; margin-right: .1rem;"></span>你就从了TA吧！</strong>
							</div>
						</div>
					</div>
				</div>
				<div class="section page">
					<div class="f6">
						<div class="textBox">
							<div class="txt28 js-animate animated hide" data-animate="fadeIn" data-time="500">
								截至如今,冒险者已与<span class="txt_y" id="hero_num">XX</span>位英雄相遇,
							</div>
							<div class="txt28 js-animate animated hide" data-animate="fadeIn" data-time="1000">
								收集<span class="txt_y" id="skin_num">XXXX</span>套皮肤。
							</div>

						</div>
					</div>
				</div>

				<div class="section page">
					<div class="f7">
						<div id="names" class="names"></div>
						<div class="zhhy_btn"></div>
					</div>
				</div>

			</div>
		</div>

		<div class="modal_haoyou" style="display:none">
			<div class="modal_close"></div>
			<div class="callBox">
				<div class="callbackLine">
					<div class="name">AASAAA</div>
					<div class="callBtn"></div>
				</div>
				<div class="callbackLine">
					<div class="name">AASAAA</div>
					<div class="callBtn cb"></div>
				</div>
				<div class="callbackLine">
					<div class="name">AASAAA</div>
					<div class="callBtn cb"></div>
				</div>
				<div class="callbackLine">
					<div class="name">AASAAA</div>
					<div class="callBtn cb"></div>
				</div>
				<div class="callbackLine">
					<div class="name">AASAAA</div>
					<div class="callBtn cb"></div>
				</div>
			</div>
			<img src="./images/haoyou_model.png" alt="" srcset="" />
		</div>
		</div>

		<div class="modal_hb">
			<div class="modal_close"></div>
			<div class="txt_box">
				<div id="hbName" class="txt_y">XXXXX</div>
				<div class="txt">2023闪烁年度回忆</div>
			</div>
			<div id="nameBox_HB"></div>
			<div class="savehb"></div>
			<img src="./images/hb.png" style="width: 100%;" />
		</div>
		<span class="start"><b></b></span>


		<!-- jQuery v3.5.1 -->
		<script src="./js/jquery.slim.min.js"></script>
		<!-- Bootstrap v4.6.2 -->
		<script src="./js/mui.js"></script>
		<script src="./config.js"></script>
		<script src="./js/axios.min.js"></script>
		<script src="./js/sgin1.min.js"></script>
		<script src="./js/sign.js"></script>
		<script src="./js/storage.js"></script>
		<script src="./js/SY_LOG.min.js"></script>
		<script src="./plugins/fullPage.js-2.9.7/jquery.fullpage.js"></script>
		<script src="./js/moment.min.js"></script>
		<script src="./js/index.js"></script>

		<script>
			var report = {}
			var hbIndex=''
			function showCH(index) {
				//显示海报
				hbIndex = index
				$("#hbName").text(cfg.accountInfo.role_info.role_name)
				$(".modal_hb").show()
				$("#nameBox_HB").html('<img  src="./images/name/' + report.achievement[index]
					.name + '2.png" />')
			}


			$(function() {
				checkLogin()
				getReport()

				function getReport(phone_number, code) {
					//获取年度信息
					var params = {}
					params["act_id"] = cfg.act_id;
					params["act_acc_id"] = cfg.accountInfo.act_acc_id;
					params["ts"] = Math.round(new Date() / 1000);
					params["sign"] = sign(params, cfg.secret_active);
					debugger
					getApi({
						url: cfg.api_active + "/anniversary/getReport",
						data: params
					}).then(res => {
						console.log(res);
						report = res.data
						for (var i = 0; i < report.achievement.length; i++) {
							$("#names").append('<img onclick="showCH(' + i + ')" src="./images/name/' + report
								.achievement[i]
								.name + '.png" />')
						}

						if (!open_num) {
							$(".f2").parent().remove()
						}
						$("#open_num").text(report.open_num)
						$("#reg_date").text(moment(report.reg_date).format("YYYY年MM月DD日"))
						$("#online_day").text(report.online_day)
						$("#online_hour").text(report.online_hour)
						$("#active_time").text(report.active_time)
						$("#similar_player_rate").text(report.similar_player_rate)

						if (!report.best_hero) {
							$(".f3").parent().remove()
						}
						$("#best_hero").text(report.best_hero)
						$("#battle_num").text(report.battle_num)
						$("#common_hero").text(report.common_hero)
						$("#common_hero_win_rate").text(report.common_hero_win_rate)

						if (!report.diamond) {
							$(".f4").parent().remove()
						}
						$("#diamond").text(report.diamond)
						$("#diamond_sort_rate").text(report.diamond_sort_rate)

						if (!report.lottery_hero_num) {
							$(".f5").parent().remove()
						}
						$("#lottery_hero_num").text(report.lottery_hero_num)
						$("#lottery_lucky_rate").text(report.lottery_lucky_rate)
						$("#partner_hero").text(report.partner_hero)

						if (!report.hero_num) {
							$(".f6").parent().remove()
						}
						$("#hero_num").text(report.hero_num)
						$("#skin_num").text(report.skin_num)
						$("#active_time").text(report.active_time)


						$('#fullpage').fullpage({
							afterLoad: function(anchorLink, index) {
								$(".page:eq(" + (index - 1) + ")").find(".js-animate").each(
								function() {
									var time = $(this).data("time")
									setTimeout(() => {
										$(this).addClass($(this).data('animate'))
										$(this).removeClass('hide');
									}, time);
								})

							},
							onLeave: function(index, nextIndex, direction) {
								$(".page:eq(" + 0 + ")").find(".js-animate").each(function() {
									$(this).removeClass($(this).data('animate'))
									$(this).addClass('hide');
								})
							},
						});
					})
				}

				$(".close").click(() => {
					$('#sshyModal').modal()
				})
				$(".zhhy_btn").click(() => {
					$(".modal_haoyou").show()
				})
				$(".modal_haoyou .modal_close").click(() => {
					$(".modal_haoyou").hide()
				})

				$(".modal_hb .modal_close").click(() => {
					$(".modal_hb").hide()
				})
				
				//保存海报
				$(".savehb").click(function(){
					var params = {}
					params["act_id"] = cfg.act_id;
					params["act_acc_id"] = cfg.accountInfo.act_acc_id;
					params["achievement"] = report.achievement[hbIndex];
					params["ts"] = Math.round(new Date() / 1000);
					params["sign"] = sign(params, cfg.secret_active);
					
					getApi({
						url: cfg.api_active + "/anniversary/special",
						data: params
					}).then(res => {
						setTimeout(function(){
							window.location.href ="./hb.html"
						},500)
					})
				})
				// $('#sshyModal').modal()

			})
		</script>
	</body>
</html>